import MenuItem from "../MenuItem";
import st from "./menu.module.css";
import YHD from "@/assets/img/yhd.svg";
import JHD from "@/assets/img/jhd.svg";
import TBD from "@/assets/img/tbd.svg";
import QTRKD from "@/assets/img/qtrkd.svg";
import PDD from "@/assets/img/pdd.svg";
import KCCX from "@/assets/img/kccx.svg";
import LSDLS from "@/assets/img/lsdls.svg";
import QTCKD from "@/assets/img/qtckd.svg";

// 导入svg作为组件
const Menu = ({
  isHome = false,
  children,
  config = [],
  comp = [], //不一样的子组件
}: any) => {
  const namelist = [
    { name: "要货单", src: YHD },
    { name: "进货单", src: JHD },
    { name: "调拨单", src: TBD },
    { name: "其他入库单", src: QTRKD },
    { name: "其他出库单", src: QTCKD },
    { name: "盘点单", src: PDD },
    { name: "库存查询", src: KCCX },
    { name: "零售单历史", src: LSDLS },
  ];
  return (
    <div className={`${isHome ? st.menu : st.card}`}>
      {!isHome && <div className={st.title}>{children}</div>}
      {isHome &&
        namelist.map((item) => (
          <MenuItem key={item.name} src={item.src}>
            {item.name}
          </MenuItem>
        ))}

      {!isHome && (
        <div className={st.mainCon}>
          {comp.length == 0 &&
            config.map((item: any) => (
              <MenuItem key={item.name} src={item.src}>
                {item.name}
              </MenuItem>
            ))}
          {comp.length != 0 && comp.map((item: any) => item)}
        </div>
      )}
    </div>
  );
};
export default Menu;
